import { defineComponent, onMounted, getCurrentInstance, nextTick, shallowRef, onDeactivated, onBeforeUnmount } from "vue";
import './chart.scss'
import * as chart from 'echarts';
import chinaMapData from './chinaMapData.json';
export default defineComponent({
    props: {
        chartOptions: Object, // 图标配置项
    },
    setup(props, ctx) {
        const self = getCurrentInstance();
        let myChart = shallowRef({ options: null });
        const registerMap = () => {
            chart.registerMap("china", { geoJSON: chinaMapData });
        }
        const init = () => {
            myChart.options = chart.init(self.refs['chart-body']);
        }
        const setOption = () => {
            myChart.options.setOption(props.chartOptions);
        }
        const chartSize = () => {
            myChart.options && myChart.options.resize();
        }
        const onresize = () => {
            window.addEventListener('resize', chartSize)
        }
        const clearOnresize = () => {
            window.removeEventListener('resize', chartSize)
        }

        onMounted(() => {
            registerMap();
            init();
            setOption();
            onresize();
            ctx.emit('rendered', myChart.options)

        })
        onBeforeUnmount(() => {
            clearOnresize();
        })
        return {
            myChart,
            init,
            setOption,
            onresize,
            registerMap,
            onresize,
        }
    },
    render(h) {
        return (
            <div className="chart-body" ref="chart-body"></div>
        )
    }
});